<template>
  <view class="course-list">
    <view class="section-title">
      <text class="title-text">新上好课</text>
      <text class="more-btn" @click="handleMore">更多 ></text>
    </view>
    <view class="course-items">
      <view 
        class="course-item" 
        v-for="(item, index) in courseList" 
        :key="index"
      >
        <image 
          class="course-img" 
          :src="item.img" 
          mode="aspectFill"
        ></image>
        <view class="course-info">
          <text class="course-title">{{ item.title }}</text>
          <view class="teacher-level">
            <text class="teacher">{{ item.teacher }}</text>
            <text class="level">{{ item.level }}</text>
          </view>
          <view class="price-learn">
            <text class="price">¥{{ item.price }}</text>
            <text class="learn-count">{{ item.learnCount }}人学习</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      courseList: [
        {
          img: '/static/1.png', // 实际替换为你的图片路径
          title: 'AI助手Copilot辅助Go+Flutter打造全栈式在线教育系统',
          teacher: 'haharsw',
          level: '初阶',
          price: 499,
          learnCount: 53
        },
        {
          img: '/static/2.png', // 实际替换为你的图片路径
          title: '全新 云原生系统精讲与全流程落地实践',
          teacher: '暮闲',
          level: '初阶',
          price: 199,
          learnCount: 52
        },
        {
          img: '/static/3.png', // 实际替换为你的图片路径
          title: 'NestJS 从拔高到精通，大型复杂业务架构落地实践',
          teacher: 'Brian',
          level: '进阶',
          price: 699,
          learnCount: 97
        }
      ]
    };
  },
  methods: {
    handleMore() {
      // 这里可实现“更多”点击逻辑，比如跳转新页面展示全部课程
      console.log('点击更多');
    }
  }
};
</script>

<style scoped>
.course-list {
  padding: 10px;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.title-text {
  font-size: 18px;
  font-weight: bold;
}
.more-btn {
  color: #999;
  font-size: 14px;
}
.course-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.course-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.course-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}
.course-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
}
.course-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}
.teacher-level {
  display: flex;
  gap: 5px;
  color: #999;
  font-size: 12px;
}
.price-learn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f00;
  font-size: 14px;
}
.learn-count {
  color: #999;
}
</style>